<template>
  <div>
    <Box>
      <div slot="box">
        <div>
          <a-form-model ref="ruleForm" layout="inline" :model="params">
            <a-form-model-item label="综治中心名称" prop="name">
              <a-input v-model="params.name	" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="姓名" prop="personChargeName">
              <a-input v-model="params.personChargeName	" placeholder="请输入" />
            </a-form-model-item>

            <a-form-model-item >
              <a-button type="primary" @click="query">
                查询
              </a-button>
              <a-button style="margin-left: 10px;" @click="resetForm">
                重置
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
    </Box>
    <Box>
      <div slot="box">
        <div style="padding:0 0 15px 0;width: 100%">
          <a-button @click="getexcel" style="margin-right: 20px">
            <a-icon type="upload" />导出
          </a-button>
<!--          <a-button @click="showModal1" >-->
<!--            <a-icon type="import" />导入-->
<!--          </a-button>-->
        </div>
        <CustomTable
          ref="table"
          :showAlert="false"
          :columns="columns"
          :dataSource="list"
          :showSelection="true"
          :showPagination="true"
          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
          rowKey="id"
          :loading="loading"
          @change="onTableChange"
        >
          <template slot="action" slot-scope="text, record">
            <a href="javascript:;" @click="showModal(record)">查看</a>
          </template>
        </CustomTable>
      </div>
    </Box>
    <div>
      <a-modal v-model="visible3" title="详细信息" @ok="handleOk" width="600px" centered :footer="null">
        <a-descriptions :title="this.detailed.name" :size="size" :column="1">
          <a-descriptions-item label="综治中心层级">
            {{ this.filterMultiDictText('level',this.detailed.level) }}
          </a-descriptions-item>
          <a-descriptions-item label="综治中心联系方式">
            {{ this.detailed.contactInformation }}
          </a-descriptions-item>
          <a-descriptions-item label="负责人">
            {{ this.detailed.personChargeName }}
            <!--          {{this.detailed.nation}}-->
          </a-descriptions-item>
          <a-descriptions-item label="负责人联系方式">
            {{ this.detailed.personChargeContacInformation }}
            <!--          {{this.detailed.politicalOutlook}}-->
          </a-descriptions-item>
          <a-descriptions-item label="组成单位">
            {{ this.detailed.component }}
          </a-descriptions-item>
          <a-descriptions-item label="所在地">
            {{ this.detailed.location }}
          </a-descriptions-item>
          <a-descriptions-item label="所在地详址">
            {{ this.detailed.detailedAddress }}
            <!--          {{this.detailed.level}}-->
          </a-descriptions-item>
          <a-descriptions-item label="坐标">
            {{ this.detailed.longitude }},{{ this.detailed.latitude }}
            <!--          {{this.detailed.duties}}-->
          </a-descriptions-item>
        </a-descriptions>
      </a-modal>
    </div>
    <div>
      <a-modal v-model="visible" title="详细信息" @ok="handleOk" width="600px" centered>
        <Input ref="input" @warn="warn"></Input>
      </a-modal>
      <a-modal v-model="visible1" title="详细信息" @ok="handleOk1" width="600px" centered>
        <!--        <Input ref="input"></Input>-->
        <div v-for="item of this.warns">
          <div style="color: red;font-size: 15px">{{ item }}</div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
import Box from '@/views/xlgc/Box/index'
import { getexcel, centrality, getexcelCom, getexcelcen } from '@/api/xlgc/ComprehensiveBusiness'
import { filterDictTextByCache, getDictItems } from '@/components/dict/JDictSelectUtil'
import { getDictItemsFromCache } from '@api/api'
import Input from '@/views/xlgc/ComprehensiveBusiness/centrality/ImportModal'
import CustomTable from '@/components/zxd/Table/CustomTable'
export default {
  name: 'List',
  components: { Box, Input, CustomTable },
  data() {
    return {
      pageFilter: {
        index: 1,
        size: 10
      },
      warns: [],
      loading: false,
      selectedRowKeys: [],
      detailed: {},
      ModalText: 'Content of the modal',
      visible: false,
      visible1: false,
      visible3: false,
      confirmLoading: false,
      size: 'large',
      input: {
        input1: ''
      },
      params: {
        name: '',
        personChargeName: ''
      },
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          customRender: (text, record, index) =>
            `${(this.pageFilter.index - 1) * this.pageFilter.size + (index + 1)}`
        },
        {
          title: '综治中心名称',
          dataIndex: 'name',
          key: 'name'

        },
        {
          title: '综治中心层级',
          dataIndex: 'level',
          key: 'level',
          customRender: (text, record) => {
            // 字典值翻译通用方法
            return this.filterMultiDictText('level', text)
          }
        },
        {
          title: '综治中心联系方式',
          key: 'contactInformation',
          dataIndex: 'contactInformation'
        },
        {
          title: '负责人姓名',
          key: 'personChargeName',
          dataIndex: 'personChargeName'
        },
        {
          title: '负责人联系方式',
          key: 'personChargeContacInformation',
          dataIndex: 'personChargeContacInformation'
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      list: []
    }
  },
  mounted() {
    this.institution(this.pageFilter)
  },
  methods: {
    warn(val) {
      console.log(val)
      if (val.success) {
        console.log(val)
        this.visible = false
        this.refreshTable(this.pageFilter)
      } else {
        console.log(val)
        this.warns = val.result
        console.log(this.warns)
        this.visible1 = true
      }
    },
    onSelectChange(selectedRowKeys, item) {
      console.log('selectedRowKeys changed: ', selectedRowKeys, item)
      this.selectedRowKeys = selectedRowKeys
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
      this.institution(this.pageFilter)
    },
    showModal1(val) {
      this.visible = true
    },
    chongzhi() {
      this.params.personChargeName = ''
      this.params.name = ''

      this.institution(this.pageFilter)
    },
    showModal(val) {
      this.detailed = val
      this.visible3 = true
    },
    handleOk(e) {
      console.log(e)
      this.$refs.input.handleOk()
      // this.visible = false;
    },
    handleOk1() {
      this.visible1 = false
    },
    skip(val) {
    },
    downLoadMix(res, fileName) {
      let blob = new Blob([res]) // res为从后台返回的数据
      if (!fileName) {
        fileName = res.headers['content-disposition'].split('filename=').pop()
      }
      if ('msSaveOrOpenBlob' in navigator) {
        window.navigator.msSaveOrOpenBlob(blob, fileName)
      } else {
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href)
        document.body.removeChild(elink)
      }
    },
    getexcel() {
      getexcelcen({
        ids: this.selectedRowKeys,
        name:this.params.name,
        data:this.params.personChargeName
      }).then(response => {
        // console.log(response)
        const fileName = '综治中心数据.xlsx'
        this.downLoadMix(response, fileName)
      }).catch(error => {
        console.log(error)
      })
    },
    query() {
      console.log(this.params)
      this.institution(Object.assign({}, this.params, this.pageFilter))
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'index' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.institution(this.pageFilter)
    },
    institution(val) {
      return new Promise((resolve, reject) => {
        this.loading = true
        centrality(val).then(response => {
          if (response.success) {
            this.loading = false
            console.log(response)
            this.list = response.result
          }
          resolve(response)
          console.log(response)
        }).catch(error => {
          this.loading = false
          reject(error)
        })
      })
    },
    filterMultiDictText(dictCode, text) {
      console.log(dictCode, text)
      if (!text && text !== 0) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    }
  }
}
</script>

<style scoped>

</style>
